margin برای فاصله بیرونی تگ ها استفاده میشود.از این خصوصیت در طراحی زیاد استفاده میکنیم

    


    <style>
    h2{
      margin: 70px;
      border: 1px solid #4CAF50;
    }
    </style>
    <h2>CSS Margins</h2>

 

 

 میتوانیم توسط خصوصیت های زیر مشخص کنیم کدام سمت تگ ما دارای فاصله باشد

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

مثال:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

 روش کوتاه تر:

p {
  margin: 25px 50px 75px 100px;
}

 در مثال بالا به این صورت اندازه ها داده میشود

  • margin: 25px 50px 75px 100px; 
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px

 

CSS Padding

در این خصوصیت فاصله عنصر داخلی تگ از داخل تگ تغییر میکند مثلا فاصله متن از border یک div.

مثل margin تعریف و همان خصوصیات را دارد

<html>
<head>
<style>
div {
 border: 1px solid black;
 background-color: lightblue;
 padding-top: 50px;
 padding-right: 30px;
 padding-bottom: 50px;
 padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
</body>
</html>

 

 

رنگ-ها-و-نوشتن-یادداشت-و-ایجاد-حاشیه--color-and-comments-and-borders (جلسه قبل)
طول و عرض در css (جلسه بعد)

دوره های اخیر